<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>商城分类</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" href="lib/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/common.js" type="text/javascript"></script>
</head>
<body ontouchstart>

<!--顶部搜索-->
<!--主体-->
<div class="wy-content">
  <div class="category-top">
	<header class='weui-header'>
			
		<div class="weui-search-bar" id="searchBar">
			<form class="weui-search-bar__form">
			
				<div class="weui-search-bar__box">
					<i class="weui-icon-search"></i>
					<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的产品类型" required>
					<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
				</div>
				<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
					<i class="weui-icon-search"></i>
					<span>搜索您想要的产品类型</span>
				</label>
			</form>
			<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
		</div>
	</header>
  </div>
  <aside>
    <div class="menu-left scrollbar-none" id="sidebar">
      <ul>
        <li class="active">纯气</li>
        <li>混合气</li>
        <li>特种气体</li>            
      </ul>
    </div>
  </aside>
  <section class="menu-right padding-all j-content">
    <!--<h5 style="padding-left:4px">纯气</h5>-->    
	 <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/01.jpg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品1</h1>
          <div class="wy-pro-pri">
		  ¥<em class="num font-15">296.00</em>
		  
		  </div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
		  <div  class="pro-amount fr"><div class="Spinner"></div></div>
        </div>
      </a>
    </div>
	<div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/02.jpeg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品2</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
		  <div  class="pro-amount fr"><div class="Spinner"></div></div>
        </div>
      </a>
    </div>
    <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/03.jpg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品3</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
		  <div  class="pro-amount fr"><div class="Spinner"></div></div>
        </div>
      </a>
    </div>
    <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/04.jpg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品4</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
		  <div  class="pro-amount fr"><div class="Spinner"></div></div>
        </div>
      </a>
    </div>
    <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/01.jpg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品5</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
		  <div  class="pro-amount fr"><div class="Spinner"></div></div>
        </div>
      </a>
    </div>
    <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/02.jpeg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品6</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
		  <div  class="pro-amount fr"><div class="Spinner"></div></div>
        </div>
      </a>
    </div>
	<div class="weui-loadmore">
		<i class="weui-loading"></i>
		<span class="weui-loadmore__tips">正在加载</span>
	</div>
  </section>
  <section class="menu-right padding-all j-content" style="display:none">
  <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/02.jpeg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品6</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
        </div>
		<div  class="pro-amount fr"><div class="Spinner"></div></div>
      </a>
    </div>
  	<!--<h5>混合气</h5>-->
   <!--<ul>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>二元混合气</span></li>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>三元混合气</span></li>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>四元混合气</span></li>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>多元混合气</span></li>     
    </ul>-->
  </section>
  <section class="menu-right padding-all j-content" style="display:none">
  <div class="pro-items">
      <a href="pro_info.html" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="pro_pic/02.jpeg" alt=""></div>
        <div class="weui-media-box__bd">
          <h1 class="weui-media-box__desc">包头市工业气体产品6</h1>
          <div class="wy-pro-pri">¥<em class="num font-15">296.00</em></div>
          <ul class="weui-media-box__info prolist-ul">
            <li class="weui-media-box__info__meta">销量<em class="num">100</em>单</li>
            <li class="weui-media-box__info__meta">规格<em class="num">40</em>L</li>
          </ul>
        </div>
      </a>
    </div>
  	<!--<h5>特种气体</h5>-->
    <!--<ul>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>氖气</span></li>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>一氧化二氮</span></li>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>一氧化氮</span></li>
      <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>三氟化氮</span></li>  
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>三氯化硼</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>三氯甲烷</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>丙烯</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>乙烯</span></li> 
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>二氟甲烷</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>二氧化硫</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>二氧化碳</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>五氟乙烷</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>六氟丙烯</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>六氟化硫</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>四氟化碳</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>异丁烯</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>氙气</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>氨气</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>氪气</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>氯化氢</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>氯气</span></li>  
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>甲烷</span></li>
	  <li class="w-3"><a href="pro_list.html"></a> <img src="upload/jingxuan5.jpg"><span>硅烷</span></li> 
    </ul>-->
  </section>  
</div>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
  <a href="index.html" class="weui-tabbar__item">
    <div class="weui-tabbar__icon foot-menu-home"></div>
    <p class="weui-tabbar__label">首页</p>
  </a>
  <a href="classify.html" class="weui-tabbar__item weui-bar__item--on">
    <div class="weui-tabbar__icon foot-menu-list"></div>
    <p class="weui-tabbar__label">分类</p>
  </a>
  <a href="shopcart.html" class="weui-tabbar__item">
    <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
    <div class="weui-tabbar__icon foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a href="mine.html" class="weui-tabbar__item">
    <div class="weui-tabbar__icon foot-menu-member"></div>
    <p class="weui-tabbar__label">我的</p>
  </a>
</div>

<script src="lib/jquery-2.1.4.js"></script> 
<script src="lib/fastclick.js"></script> 
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
<script src="js/jquery-weui.js"></script>
<script type="text/javascript">
	$(function($){
		$('#sidebar ul li').click(function(){
			$(this).addClass('active').siblings('li').removeClass('active');
			var index = $(this).index();
			$('.j-content').eq(index).show().siblings('.j-content').hide();
		})
	})
</script>


<script type="text/javascript" src="js/jquery.Spinner.js"></script>
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
<script type="text/javascript">
$(function(){
	$(".Spinner").Spinner({value:1, len:3, max:999});
});
</script>
<script src="js/jquery-weui.js"></script>
</body>
</html>
